<template>
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-main>
      <router-view/>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="访客" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="filteredList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="font-size: 16px">
        <el-table-column type="index"
                         :index="indexFn"
                         prop="id"
                         label="No." width="100" align="center">
        </el-table-column>
        <el-table-column label="uid" prop="userId" width="1" align="center" v-if="false"></el-table-column>
        <el-table-column label="vid" prop="visitorId" width="1" align="center" v-if="false"></el-table-column>
        <el-table-column  prop="userAvatar" width="50" align="center">
          <template #default="scope" >
            <el-avatar :src="scope.row.userAvatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="userName" width="120" align="center"></el-table-column>
        <el-table-column label="性别" prop="userGender" width="80" align="center"></el-table-column>
        <el-table-column label="联系电话" prop="userPhone" width="180" align="center"></el-table-column>
        <el-table-column label="用户名" prop="userNickName" width="180" align="center"></el-table-column>
        <el-table-column label="紧急联系人" prop="emergencyName" width="120" align="center"></el-table-column>
        <el-table-column label="紧急电话" prop="emergencyPhone" width="180" align="center"></el-table-column>
        <el-table-column label="最后登录时间" prop="lastLoginTime" width="200" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" width="100" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-tooltip
                class="item"
                effect="light"
                content="禁用"
                placement="bottom"
            >
              <el-button type="info" icon="el-icon-close" circle @click="BanEvent(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="filteredList.length"
          :page-size="pageSize"
          @current-change="paging"
      >
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
const userUrl = 'http://img.meituan.net/avatar/8e121229f5fbde1040d0969a095afdbf49867.jpg'
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
export default {
  name: "AdminUsr",
  data(){
    return{
      valueFormat:'YYYY-MM-DD',
      format:'YYYY-MM-DD',
      currentPage:1,
      pageSize:8,
      form:{
        name:''
      },
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      filteredList:[],
      dataList:[
        {
          userId: '100001',
          visitorId:'900001',
          userNickName: "qwx",
          userName: "qwx",
          userAvatar:circleUrl,
          userGender: "男",
          userPhone: "110",
          emergencyName: "qwe",
          emergencyPhone: "119",
          status:'正常',
          lastLoginTime: '2022-03-18',
          role: '访客',
        },
        {
          userId: '100002',
          visitorId:'900002',
          userNickName: "qwx",
          userName: "qwx",
          userAvatar:circleUrl,
          userGender: "男",
          userPhone: "110",
          emergencyName: "qwe",
          emergencyPhone: "119",
          status:'正常',
          lastLoginTime: '2022-03-18',
          role: '访客',
        },
        {
          userId: '100003',
          visitorId:'900003',
          userNickName: "qwx",
          userName: "qwx",
          userAvatar:circleUrl,
          userGender: "男",
          userPhone: "110",
          emergencyName: "qwe",
          emergencyPhone: "119",
          status:'正常',
          lastLoginTime: '2022-03-18',
          role: '访客',
        },
        {
          userId: '100004',
          visitorId:'900004',
          userNickName: "qwx",
          userName: "qwx",
          userAvatar:circleUrl,
          userGender: "男",
          userPhone: "110",
          emergencyName: "qwe",
          emergencyPhone: "119",
          status:'正常',
          lastLoginTime: '2022-03-18',
          role: '访客',
        },
      ]
    }
  },
  methods: {
    paging(val){
      const _this = this
      _this.currentPage = val
    },
    onSubmit() {
      const _this = this
      _this.filteredList = _this.filterList(_this.form)
      console.log(this.form)
    },
    BanEvent(row){
      this.$confirm('您确定要禁用这位访客？')
          .then((_) => {
            const _this = this
            _this.$axios.get('http://106.14.247.163:8080/visitor/ban/'+row.userId).then(resp=>{
              console.log(resp)
            })
            _this.$message.warning('已禁用该用户！')
          })
          .catch((_) => {})
    },
    indexFn(index) {
      index = (index + 1) + (this.currentPage-1) * this.pageSize
      return index
    },
    filterList(item) {
      const _this = this
      let newList = []
      if (item.name === '' || item.name===null) {
        return _this.dataList
      }

      else {
        console.log(_this.dataList)
        let l = []
        l = _this.dataList
        for(let i = 0,len = l.length;i<len;++i){
          let flag = false
          //console.log(l[i])
          let str = '.*?'+item.name+'.*'
          let reg = new RegExp(str)
          if (reg.test(l[i]['userName'])){

          }else{
            flag = true
          }
          if (flag === false){
            newList.push(l[i])
          }
        }
        return newList
      }
    }
  },
  async created() {
    const _this = this
    await _this.$axios.get('http://106.14.247.163:8080/visitor/getAllVisitors').then(resp=>{
      let res = resp.data.data
      _this.dataList = []
      for (let item of res){
        if (item.userInfo === null || item.userInfo.userId === null || item.userInfo.userName === null) {
          continue
        }
        _this.dataList.push({
          userId: item.userInfo.userId,
          visitorId:item.visitorInfo.visitorId,
          userNickName: item.userInfo.userNickname===null?'无':item.userInfo.userNickname,
          userName: item.userInfo.userName,
          userAvatar:userUrl,
          userGender: item.userInfo.userGender===null||item.userInfo.userGender===0?"男":"女",
          userPhone: item.userInfo.userPhone===null?'-':item.userInfo.userPhone,
          emergencyName: item.visitorInfo.emergencyName===null?'无':item.visitorInfo.emergencyName,
          emergencyPhone: item.visitorInfo.emergencyPhone===null?'无':item.visitorInfo.emergencyPhone,
          status:item.visitorInfo.isBanned===null||item.visitorInfo.isBanned==="0"?'正常':'封禁',
          lastLoginTime:item.visitorInfo.lastLoginTime===null?'1970-01-01': item.visitorInfo.lastLoginTime.slice(0,10),
          role: '访客',
        })
      }
    })
    _this.filteredList = _this.dataList
  }
}
</script>

<style scoped>

</style>